<template>
    <div id="app">
        <el-container class="el-container" style="height: 500px; border: 1px solid #111">
            <el-header class="el-header" style="background-color: beige">欢迎进入</el-header>
            <el-container>
                <el-aside>
                    <el-menu :default-active="$route.path" router="true">
                        <el-submenu v-for="group in groups" :index="group.index" :key="group.index">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{group.description}}</span>
                            </template>
                            <el-menu-item v-for="i in $router.options.routes"
                                          :key="i.path" :index="i.path" v-if="(i.groupIndex === group.index) && !i.children">
                                <i class="el-icon-document"></i>
                                <span slot="title">{{i.description}}</span>
                            </el-menu-item>
                            <el-submenu v-for="i in $router.options.routes"
                                        :key="i.path" :index="i.path" v-if="(i.groupIndex === group.index) && i.children">
                                <span slot="title">{{i.description}}</span>
                                <el-menu-item v-for="j in i.children"
                                              :key="j.path" :index="j.path">
                                    <i class="el-icon-document"></i>
                                    <span slot="title">{{j.description}}</span>
                                </el-menu-item>
                            </el-submenu>
                        </el-submenu>

                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    export default {
        data: function () {
            return {
                groups: [
                    {
                        description: '基础资料',
                        index: 1,
                    },
                    {
                        description: '交易信息',
                        index: 2,
                    }
                ]
            }
        }
    }

</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
